<template>
  <div
    class="app-container"
    v-loading="loading"
  >
    <!-- 品牌轮播图信息 -->
    <div
      v-if="isBanner"
      style="height: 77vh"
    >
      <div style="padding: 20px 30px; background: #fff; height: 350px">
        <el-descriptions
          title="品牌轮播图信息"
          :column="2"
        >
          <el-descriptions-item label="排序">{{
            detail.sort
          }}</el-descriptions-item>
          <el-descriptions-item label="轮播图名称">{{
            detail.bannerName
          }}</el-descriptions-item>
          <el-descriptions-item label="轮播图">
            <video
              v-if="isVideo == 'mp4'"
              :src="domain + detail.imgUrl"
              controls="controls"
              style="width: 100px; height: 100px"
            />

            <ImagePreview
              v-if="
                detail &&
                detail.carousel &&
                detail.carousel.length == 0 &&
                isVideo !== 'mp4'
              "
              :src="detail.imgUrl"
            />
            <ImagePreview
              v-else
              v-for="item in detail.carousel"
              :src="item"
              :key="item"
            />
          </el-descriptions-item>
          <el-descriptions-item label="提交时间">{{
            detail.createTime
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 审核信息 -->

      <div style="padding: 20px; background: #fff; margin-top: 20px">
        <div style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          ">
          <p style="font-weight: bold">审核信息</p>
          <el-button
            type="primary"
            size="mini"
            v-if="detail.auditStatus === 2"
            @click="click().handleResubmit()"
          >重新提交</el-button>
        </div>
        <el-descriptions
          style="margin: 20px 0"
          :column="3"
        >
          <el-descriptions-item label="状态">{{
            detail.auditStatus === 1
              ? '已通过'
              : detail.auditStatus === 2
              ? '已驳回'
              : detail.auditStatus === 0
              ? '待审核'
              : ''
          }}</el-descriptions-item>
          <el-descriptions-item label="操作人">{{
            auditData.auditSysUserName
          }}</el-descriptions-item>
          <el-descriptions-item label="操作时间">{{
            auditData.auditTime
          }}</el-descriptions-item>
          <el-descriptions-item
            v-if="detail.auditStatus === 2"
            label="驳回原因"
          >{{ auditData.auditReason }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <div v-else>
      <div style="padding: 20px; background: #fff">
        <el-descriptions
          title="商品基础信息"
          :column="2"
        >
          <el-descriptions-item label="商品ID">{{
            detail.goodsId
          }}</el-descriptions-item>
          <el-descriptions-item label="商品名称">{{
            detail.goodsName
          }}</el-descriptions-item>
          <el-descriptions-item label="排序">{{
            detail.sort
          }}</el-descriptions-item>
          <el-descriptions-item label="商品分类">{{
            detail.goodsTypeName
          }}</el-descriptions-item>
          <el-descriptions-item label="是否在首页精选显示">{{
            detail.isSelected == 1 ? '是' : '否'
          }}</el-descriptions-item>
          <el-descriptions-item label="是否上架">{{
            detail.isGrounding == 1 ? '是' : '否'
          }}</el-descriptions-item>
          <el-descriptions-item label="封面图">
            <ImagePreview :src="detail.coverImg || ''" />
          </el-descriptions-item>
          <el-descriptions-item label="是否促销商品">{{
            detail.isPromotion == 1 ? '是' : '否'
          }}</el-descriptions-item>
          <el-descriptions-item label="轮播图">
            <video
              v-if="isVideo == 'mp4'"
              :src="domain + detail.imgUrl"
              controls="controls"
              style="width: 100px; height: 100px"
            />

            <ImagePreview
              v-else
              v-for="item in detail.carousel"
              :src="item"
              :key="item"
            />
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div style="padding: 20px; background: #fff; margin: 20px 0">
        <el-descriptions
          title="商品规格设置"
          style="margin: 20px 0"
          :column="2"
        >
          <el-descriptions-item label="规格">{{
            detail.goodsTypeName
          }}</el-descriptions-item>
          <el-descriptions-item label="库存">{{
            detail.goodsSpecificationsGroupRos[0].goodsSpecificationsRos[0]
              .inventory
          }}</el-descriptions-item>
          <el-descriptions-item
            span="2"
            label="库存预警"
          >{{
            detail.goodsSpecificationsGroupRos[0].goodsSpecificationsRos[0]
              .inventoryAlert
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div style="padding: 20px; background: #fff">
        <div style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          ">
          <p style="font-weight: bold">审核信息</p>
          <el-button
            type="primary"
            size="mini"
            v-if="detail.auditStatus === 2"
            @click="click().handleResubmit()"
          >重新提交</el-button>
        </div>

        <el-descriptions
          style="margin: 20px 0"
          :column="3"
        >
          <el-descriptions-item label="状态">{{
            detail.auditStatus === 1
              ? '已通过'
              : detail.auditStatus === 2
              ? '已驳回'
              : detail.auditStatus === 0
              ? '待审核'
              : ''
          }}</el-descriptions-item>
          <el-descriptions-item label="操作人">{{
            auditData.auditSysUserName
          }}</el-descriptions-item>
          <el-descriptions-item label="操作时间">{{
            auditData.auditTime
          }}</el-descriptions-item>
          <el-descriptions-item
            v-if="detail.auditStatus === 2"
            label="驳回原因"
          >{{ auditData.auditReason }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getComDetail,
  getBanDetail,
  reSubmit,
  comReSubmit,
} from "@/api/merchant-store-manage/submit-record.js";
import { imgDomain } from "@/configs/env";

export default {
  data() {
    return {
      domain: imgDomain,
      loading: false,
      isVideo: "",
      interfaceObj: {
        comDetApiName: getComDetail,
        banDetAipName: getBanDetail,
      },
      detail: {},
      auditData: {},
      goodsSpec: {},
      isBanner: false,
    };
  },

  created() {
    // 获取动态路由url
    console.log(this.$route.params.uuid)
    this.network().getDetail();
  },
  methods: {
    click() {
      return {
        // 重新提交
        handleResubmit: async () => {
          const { uuid } = this.$route.params;
          const bannerId = this.$route.query.bannerId
          const goodsId = this.$route.query.goodsId
          if (this.$route.query.actName == "banner") {
            this.$router.push({
              path: `/merchant-store-manage/rotationManage/edit/${bannerId}`,
            });
          }
          if (this.$route.query.actName == "commodity") {
            this.$router.push({
                  path: `/merchant-store-manage/commodityManage/edit/${goodsId}`,
                });
          }
          
          // this.deleteMessageBox({
          //   message: '是否确认重新提交？',
          //   hideTit: true,
          // }).then(() => {
          //   this.network().handleComfirm(this.auditData);
          // });
        },
      };
    },
    network() {
      return {
        getDetail: async () => {
          const { uuid } = this.$route.params;
          console.log(uuid);
          if (this.$route.query.actName == "banner") {
            this.isBanner = true;
          }
          this.loading = true;
          try {
            if (this.$route.query.actName == "banner") {
              const { banDetAipName } = this.interfaceObj;
              const { data } = await banDetAipName({ id: uuid });
              this.loading = false;
              this.detail = data;
              console.log(this.detail);
              // 判断是否是视频
              this.isVideo = this.fileFilter;

              this.auditData = data.auditRecordList.find(
                (item) => (item.id = uuid)
              );
              console.log(this.auditData);
              Object.assign(this.detail, data, {
                carousel:
                  typeof data.carousel === "string"
                    ? data.carousel.split(",")
                    : [],
              });
            } else {
              const { comDetApiName } = this.interfaceObj;
              const { data } = await comDetApiName({ id: uuid });
              this.loading = false;
              this.detail = data;
              console.log(this.detail);
              this.goodsSpec =
                data.goodsSpecificationsGroupRos[0].goodsSpecificationsRos;
              // 判断是否是视频
              // this.isVideo = this.fileFilter;

              this.auditData = data.auditRecordList.find(
                (item) => (item.id = uuid)
              );
              Object.assign(this.detail, data, {
                carousel:
                  typeof data.carousel === "string"
                    ? data.carousel.split(",")
                    : [],
              });
            }
          } catch (error) {
            this.loading = false;
          }
        },
        handleComfirm: async (obj) => {
          try {
            const data = await reSubmit({
              ...obj,
              type: 1,
            });
            this.$message({
              message: "提交成功",
              type: "success",
            });
            this.$router.go(-1);
          } catch (error) {
            console.log(1);
            this.$message({
              message: "提交失败",
              type: "error",
            });
          }
        },
      };
    },
  },
  computed: {
    fileFilter() {
      const fileExtension = this.detail.imgUrl.split(".")[1].toLowerCase();
      return fileExtension;
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  background-color: #f0f2f5 !important;
  padding: 40px;
}

::v-deep {
  .el-descriptions-item__container {
    display: flex;
  }
}

::v-deep .el-descriptions-item {
  padding: 20px 0;
}
</style>
